<template>
	<view class="goods-cate">
	<!-- 	<view class="content" v-if="appConfig.cate_style == 1 || appConfig.cate_style == 4"> -->
		<view class="content">
			<cate-two :cate-list="cateList"></cate-two>
		</view>
		<!-- <view class="test"></view>
		<view class="test2"></view> -->
		<!-- <view class="content bg-body" v-if="appConfig.cate_style == 1 || appConfig.cate_style == 4">
			<cate-one :cate-list="cateList"></cate-one>
		</view> -->
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		getLevelOneList,
		getGoodsList,
		getListByLevelOne
	} from '@/api/store';
	import {
		getRect,
		trottle,
		arraySlice
	} from '@/utils/tools';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				cateList: [],
				cateTwoList: [],
				selectIndex: 0
			};
		},
		async onLoad(options) {
			this.getLevelOneListFun();
			// this.getListByLevelOneFun()
		},
		onShow() {
			this.getCartNum()
		},
		methods: {
			...mapActions(['getCartNum']),
			async getLevelOneListFun() {
				const {
					code,
					data
				} = await getLevelOneList();
				if (code == 1) {
					this.cateList = data
				}
			},

		},
		computed: {
			...mapGetters(['inviteCode', 'appConfig']),
		}
	};
</script>
<style lang="scss" scoped>
	$header-height: 94rpx;


   .test {
	   width: 100rpx;
	   height: 50rpx;
	   background-color: red;
   }
   .test2 {
   	   width: 100px;
   	   height: 50px;
   	   background-color: red;
   }
	page {
		background-color: #fff;
		height: 100%;
		.goods-cate {
			height: 100%;
			.header {
				box-sizing: border-box;
				height: $header-height;
				border-bottom: $-solid-border;

				.search {
					flex: 1;
					height: 60rpx;

					input {
						flex: 1;
						height: 100%;
					}
				}
			}

			.content {
				height: calc(100vh - var(--window-top) - var(--window-bottom) - 74px - env(safe-area-inset-bottom));
			}
		}
	}
</style>
